<template>
  <div>
    <a-form :model="value" :form="form">
      <a-row :gutter="24">
        <a-col :md="{span:10,push:3}" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            style="width: 380px"
            label="*商品分类" >
           <a-tree-select show-search
                           style="width: 100%"
                           :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                           v-model="value.productCategoryId"
                          :replaceFields="replaceFields"
                          :getPopupContainer="(triggerNode)=>triggerNode.parentNode"
                           placeholder="请选择二级分类"
                           allow-clear
                           treeDefaultExpandAll
                           tree-node-filter-prop="title"
                           :tree-data="treeData"
                          :disabled="value.id !== undefined && value.id !== null"
                          @change="productCategoryChange">
            </a-tree-select>
          </a-form-item>

        </a-col>
        <a-col :md="{span:10,push:3}" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="品牌">
            <a-select
              v-model="value.brandId"
              style="width: 100%"
              :getPopupContainer="node => node.parentNode"
              placeholder="请选择品牌" :disabled="value.id !== undefined && value.id !== null">
              <a-select-option v-for="(brand,brandIndex) in brandList" :key="brandIndex.toString()"
                               :value="brand.id">
                {{ brand.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <!--<a-col :md="{span:10,push:3}" :sm="24">-->
          <!--<a-form-item-->
            <!--:labelCol="labelCol"-->
            <!--:wrapperCol="wrapperCol"-->
            <!--style="width: 380px"-->
            <!--label="*商品版本">-->
            <!--<a-select-->
              <!--v-model="value.brandCategory"-->
              <!--style="width: 100%"-->
              <!--:getPopupContainer="node => node.parentNode"-->
              <!--placeholder="请选择品牌">-->
              <!--<a-select-option v-for="(brand,brandIndex) in brandCategoryList" :key="brandIndex.toString()"-->
                               <!--:value="brand.brandCategory">-->
                <!--{{ brand.name }}-->
              <!--</a-select-option>-->
            <!--</a-select>-->
          <!--</a-form-item>-->
        <!--</a-col>-->
        <!--<a-col :md="{span:10,push:3}" :sm="24">-->
          <!--<a-form-item-->
            <!--:labelCol="labelCol"-->
            <!--:wrapperCol="wrapperCol"-->
            <!--style="width: 380px"-->
            <!--label="*扫码出库">-->
            <!--<a-select-->
              <!--v-model="value.boxCodeFlag"-->
              <!--style="width: 100%"-->
              <!--:getPopupContainer="node => node.parentNode"-->
              <!--placeholder="请选择是否扫码出库">-->
              <!--<a-select-option v-for="(outbound,brandIndex) in outboundList" :key="outbound.toString()"-->
                               <!--:value="outbound.OutboundValue">-->
                <!--{{ outbound.name }}-->
              <!--</a-select-option>-->
            <!--</a-select>-->
          <!--</a-form-item>-->
        <!--</a-col>-->
        <a-col :md="24" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="* 商品名称">
            <a-input disabled placeholder="请输入商品名称" v-model="value.name"/>
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="副标题">
            <a-input placeholder="请输入副标题" v-model="value.subTitle" />
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="商品介绍">
            <a-input placeholder="请输入商品介绍" v-model="value.description" />
          </a-form-item>
        </a-col>
        <a-col :md="{span:10,push:3}" :sm="24">
          <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              style="width: 360px"
              label="* 物料编码">
            <a-input placeholder="请输入物料编码" v-model="value.skuCode" :disabled="value.id !== undefined && value.id !== null"/>
          </a-form-item>
        </a-col>
        <a-col :md="{span:10,push:3}" :sm="24">
          <a-form-item
              :labelCol="labelCol"
              style="width: 360px"
              :wrapperCol="wrapperCol"
              label="* 个/箱">
            <a-input placeholder="请输入值" v-model="value.skuSpec"  type="number" :disabled="value.id !== undefined && value.id !== null"/>
          </a-form-item>
        </a-col>

        <a-col :md="{span:10,push:3}" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="计量单位">
            <a-input disabled  placeholder="请输入计量单位" v-model="value.unit" />
          </a-form-item>
        </a-col>

        <a-col :md="{span:10,push:3}" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="* 库存单位">
            <a-input disabled placeholder="请输入库存单位" v-model="value.skuUnit" />
          </a-form-item>
        </a-col>

        <a-col :md="24" :sm="24" :style="{ textAlign: 'right' }">
          <a-form-item :wrapperCol="{span: 19, offset: 5}">
            <a-button type="primary" @click="nextStep">下一步</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
  import { duplicateCheck } from '@/api/api'
  import { getAction } from '@api/manage'

  export default {
    name: "ProductInfoDetailJX",
    props: {
      value: Object
    },
    computed:{
      brandId:{
        get(){
          if (this.value.brandId)
            return this.value.brandId.toString();
          else
            return '';
        },
        set(v){
          if('' === v)
            this.value.brandId = '';
          else
            this.value.brandId = parseInt(v);
        }
      }
    },
    created() {
      this.getBrandList()
      this.getCategoryList()
    },
    data () {
      return {
        visible: false,
        treeData: [],
        replaceFields: {
          children: 'children',
          title: 'name',
          key: 'name',
          value: 'id',
        },
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        brandList: [],
        brandCategoryList: [{brandCategory:1,name:'老品'},{brandCategory:2,name:'新品'}],
        outboundList: [{OutboundValue:0,name:'依赖新老品标记'},{OutboundValue:1,name:'需要扫描出库'},{OutboundValue:2,name:'不需要扫码出库'}],
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
          name:{rules: [{ required: true, message: '请输入商品名称!' }]},
          skuCode: { rules: [{ required: true, message: '请输入物料编码!' }] },
          skuUnit:{rules: [{ required: true, message: '请输入库存单位!' }]},
          productCategoryId:{rules: [{ required: true, message: '请选择分类!' }]},

        },
        url: {
          getBrands: '/pms/pmsBrand/getBrands',
          queryLevelListAndChild: '/pms/pmsProductCategory/queryLevelListAndChild'
        },
      }
    },
    methods: {
      nextStep () {
        this.checkProductSn();
      },
      checkProductSn(){
        let pattern = /^[0-9A-Z]+$/;
        if(!this.value.productCategoryId){
          this.$message.error("商品分类不允许为空")
          return
        }
        console.log(this.value.productCategoryId);
        if(!this.value.name){
          this.$message.error("商品名称不允许为空")
          return
        }
        if(!this.value.skuCode){
          this.$message.error("物料编码不允许为空")
          return
        }
        if(!this.value.skuSpec){
          this.$message.error("销售单位不允许为空")
          return
        }
        if(!this.value.skuUnit){
          this.$message.error("库存单位不允许为空")
          return
        }
        if(!this.value.unit && this.value.skuSpec !=1){
          this.$message.error("计量单位为空时，销售单位只能为1")
          return
        }
        this.$emit('nextStep');
      },
      getBrandList() {
        getAction(this.url.getBrands, {}).then(res => {
          if (res.success) {
            this.brandList = res.result
          } else {
            console.log(res.message)
          }
        })
      },
      productCategoryChange(value, node, extra){
        if(extra.triggerNode.$children.length>0){
          this.$message.error("该商品分类还有二级分类，请选择二级分类")
          return
        }

      },
      getCategoryList() {
        getAction(this.url.queryLevelListAndChild, {}).then(res => {
          if (res.success) {
            this.treeData = res.result;
          } else {
            console.log(res.message)
          }
        })
      },
    }
  }
</script>

<style scoped>

</style>
